<template>
	<view>
		<view class="unio2o-footer-zw">
			<view class="unio2o-footer-h"></view>
		</view>
		<view class="unio2o-footer box-shadow-top">
			<view class="unio2o-footer-h flex alcenter space">
				<view v-for="(item, index) in icons" :key="index" class="item col5">
					<navigator open-type="redirect" :url="item.url">
						<view class="text-center pt10">
							<image :src="selectIndex == index ? item.iconOn : item.icon"></image>
						</view>
						<view class="text-center ft12" :class="selectIndex == index ? 'text-theme' : 'text-main'">
							{{ item.name }}
						</view>
					</navigator>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		selectIndex: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			icons: []
		}
	},
	mounted() {
		// 初始化SVG图标配置
		this.icons = [
			{
				name: '首页',
				icon: '/static/images/app/tabbar_home.svg',
				iconOn: '/static/images/app/tabbar_home_active.svg',
				url: '/pages/index/index'
			},
			{
				name: '券集市',
				icon: '/static/images/app/tabbar_coupon.svg',
				iconOn: '/static/images/app/tabbar_coupon_active.svg',
				url: '/pages/coupon/index'
			},
			{
				name: '发现',
				icon: '/static/images/app/tabbar_discover.svg',
				iconOn: '/static/images/app/tabbar_discover_active.svg',
				url: '/pages/toutiao/index'
			},
			{
				name: '联盟卡',
				icon: '/static/images/app/tabbar_card.svg',
				iconOn: '/static/images/app/tabbar_card_active.svg',
				url: '/pages/unicard/index'
			},
			{
				name: '我的',
				icon: '/static/images/app/tabbar_user.svg',
				iconOn: '/static/images/app/tabbar_user_active.svg',
				url: '/pages/member/index'
			}
		]
	}
}
</script>

<style>
.unio2o-footer {
	padding-bottom: env(safe-area-inset-bottom);
	width: 100%;
	position: fixed;
	bottom: 0px;
	left: 0px;
	z-index: 100;
	background: #FFFFFF;
}

.unio2o-footer-zw {
	padding-bottom: env(safe-area-inset-bottom);
}

.unio2o-footer-h {
	height: 100rpx;
}

.unio2o-footer .item {
	height: 100rpx;
}

.unio2o-footer image {
	width: 44rpx;
	height: 44rpx;
}
</style>